<!doctype html>
<html class="no-js">

<head>
    <title>打卡</title>
    <#include "/res/components/meta.html" />
    <#include "/res/components/stylesheets.html" />
    <link rel="stylesheet" type="text/css" href="/res/stylesheets/post.css">
</head>

<body>
    <div id="app">
        <textarea rows="5" placeholder="这一刻的想法…" class="text" v-model="text"></textarea>
        <ul class="am-avg-sm-4 gallery">
            <li v-for="(item, index) in images">
                <div class="gallery-item fillimg">
                    <img :src="item" @click="changeImg(index)" />
                    <button type="button" class="am-close" @click="deleteImg(index)">&times;</button>
                </div>
            </li>
            <li v-if="images.length < imgLimit">
                <div class="gallery-upload" @click="selectImg">
                    <i class="am-icon-plus"></i>
                </div>
            </li>
        </ul>
        <div v-for='item in serverIds'>
            <p>{{item}}</p>
        </div>
        <div class="button">
            <button class="am-btn submit-button theme-background-color theme-border-color" @click="submit">发布</button>
        </div>
        <#include "/res/components/footer.html" />
    </div>
    <#include "/res/components/scripts.html" />
    <#include "/res/components/wxConfig.html" />
    <script src="https://cdn.bootcss.com/layer/3.1.0/mobile/layer.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            text: '',
            imgLimit: 6,
            images: [],
            serverIds: []
        },
        mounted() {

        },
        methods: {
            selectImg() {
                var self = this;
                wx.chooseImage({
                    count: self.imgLimit - self.images.length, // 图片数限制
                    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function(res) {
                        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                        for (var index in localIds) {
                            if (isAndroid_ios()) {
                                self.images.push(localIds[index]);
                            } else {
                                wx.getLocalImgData({
                                    localId: localIds[index], // 图片的localID
                                    success: function(res) {
                                        self.images.push(res.localData); // localData是图片的base64数据，可以用img标签显示
                                    }
                                });
                            }
                        }
                        self.syncUpload(localIds);
                        setTimeout("adjustImgs()", 500);
                    }
                });
            },
            syncUpload(localIds) {
                var self = this;
                var localId = localIds.pop();
                wx.uploadImage({
                    localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function(res) {
                        var serverId = res.serverId; // 返回图片的服务器端ID
                        self.serverIds.push(serverId);
                        if (localIds.length > 0) {
                            self.syncUpload(localIds);
                        }
                    }
                });
            },
            changeImg(index) {
                var self = this;
                wx.chooseImage({
                    count: 1, // 图片数限制
                    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function(res) {
                        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                        var localId = localIds[0];
                        if (isAndroid_ios()) {
                            self.images.push(localId);
                        } else {
                            wx.getLocalImgData({
                                localId: localId, // 图片的localID
                                success: function(res) {
                                    // localData是图片的base64数据，可以用img标签显示
                                    self.images.splice(index, 1, res.localData);
                                }
                            });
                        }
                        wx.uploadImage({
                            localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
                            isShowProgressTips: 0, // 默认为1，显示进度提示
                            success: function(res) {
                                // 返回图片的服务器端ID
                                self.serverIds.splice(index, 1, res.serverId);
                            }
                        });
                        setTimeout("adjustImgs()", 500);
                    }
                });
            },
            deleteImg(index) {
                var self = this;
                self.images.splice(index, 1);
                self.serverIds.splice(index, 1);
            },
            submit() {
                var self = this;
                if (self.text == "") {
                    alert('不说点什么吗?')
                    return;
                }
                var ids = "";
                for (var index = 0; index < self.serverIds.length; index++) {
                    ids += self.serverIds[index] + ";";
                }
                layer.open({
                    type: 2,
                    content: '加载中'
                });
                var param = Qs.stringify({
                    appId: APP_ID,
                    text: self.text,
                    mediaIds: ids,
                });
                axios({
                        url: '/community/submit',
                        method: 'post',
                        data: param,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                    .then(function(response) {
                        layer.closeAll()
                        if (response.data.status == 200) {
                            alert("发布成功");
                            window.location.href = "/tg/community";
                        } else {
                            alert("发布失败：(" + response.data.status + ") " + response.data.msg);
                        }
                    })
                    .catch(function(error) {
                        layer.closeAll()
                        alert("发布失败：" + error);
                    });
            }
        }
    })
    wx.ready(function() {
        initWXShare()
    })

    function isAndroid_ios() {
        // true: android; false: ios
        var u = navigator.userAgent,
            app = navigator.appVersion;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        return isAndroid == true ? true : false;
    }
    </script>
</body>

</html>